import React, { useContext,useState } from "react";

const UserContext = React.createContext()


function Context(){
    const [name,setName] = useState('Millet1');
    const {Provider ,Consumer} = UserContext;

    const logoOut =()=>{
        setName('');
    }
    return (
        <Provider value={{name,logoOut}}>
            {/* <Consumer>
                {value => <a>{value.name}</a>}
                
            </Consumer> */}
            <Chidren />
        </Provider>
    )
}
function Chidren(){
    const value = useContext(UserContext);
    return (
        <>
        <h3>Children</h3>
        <a>{value.name}</a>
        <button onClick={() =>value.logoOut}>注销</button>
        </>
    )
}
export default Context;